<!DOCTYPE html>
<html lang='en'>
<head>
  <meta charset='UTF-8' />
  <meta name='viewport' content='width=device-width, initial-scale=1' />
  <meta name='description' content='Partytown Test Page' />
  <title>Main Window Accessors</title>

  <script>
    partytown = {
      logCalls: true,
      logGetters: true,
      logSetters: true,
      logStackTraces: false,
      logScriptExecution: true,
      mainWindowAccessors: ['globalField', 'globalFunction'],
    };
  </script>
  <script src='/~partytown/debug/partytown.js'></script>

  <script>
    window.globalField = {
      value: 42,
      parentObj: {
        childValue: 'stringValue',
      },
    };
  </script>

  <style>
      body {
          font-family: -apple-system, BlinkMacSystemFont, Segoe UI, Helvetica, Arial, sans-serif,
          Apple Color Emoji, Segoe UI Emoji;
          font-size: 12px;
      }

      h1 {
          margin: 0 0 15px 0;
      }

      ul {
          list-style-type: none;
          margin: 0;
          padding: 0;
      }

      a {
          display: block;
          padding: 16px 8px;
      }

      a:link,
      a:visited {
          text-decoration: none;
          color: blue;
      }

      a:hover {
          background-color: #eee;
      }

      li {
          display: flex;
          margin: 15px 0;
      }

      li strong,
      li code,
      li button {
          white-space: nowrap;
          flex: 1;
          margin: 0 5px;
      }
  </style>
</head>
<body>
<h1>Main Window Accessors</h1>
<ul>
  <li>
    <strong>Parent level access</strong>
    <code id='testWindowAccessor'></code>
    <script type='text/partytown'>
      document.getElementById('testWindowAccessor').innerText = window.globalField.value;
    </script>
  </li>
  <li>
    <strong>Child level access</strong>
    <code id='testChildWindowAccessor'></code>
    <script type='text/partytown'>
      document.getElementById('testChildWindowAccessor').innerText = window.globalField.parentObj.childValue;
    </script>
    <code id='testGlobalFunction'></code>
    <script type='text/javascript'>
      window.globalFunction = (arg) => {
        document.getElementById('testGlobalFunction').textContent = JSON.stringify(arg);
      }
    </script>
    <script type='text/partytown'>
      window.globalFunction({ hello: 'world' });
    </script>
  </li>
  <script type='text/partytown'>
      document.body.classList.add('completed');
  </script>
</ul>


<hr />
<p><a href='/tests/'>All Tests</a></p>

</body>
</html>
